<template>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="elli" @select="handleSelect">
        <el-menu-item>复杂系统协同自抗扰控制与韧性优化实验室</el-menu-item>
        <div style="flex-grow: 1;" />
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2">研究队伍</el-menu-item>
        <el-menu-item index="3">研究方向</el-menu-item>
        <el-menu-item index="4">研究成果</el-menu-item>
        <el-menu-item index="5">团队成员</el-menu-item>
        <el-menu-item index="6">教学工作</el-menu-item>
    </el-menu>
</template>
  
<script setup>
const activeIndex = ref('1')
const handleSelect = (key, keyPath) => {
    if (key == 1) {
        window.scrollTo(0, 0)
    }
    if (key == 2) {
        let teachers = document.querySelector('#teachers')
        window.scrollTo({
            top: teachers.offsetTop,
            behavior: "smooth"
        });
    }
    if (key == 3) {
        let research = document.querySelector('#research')
        window.scrollTo({
            top: research.offsetTop,
            behavior: "smooth"
        });
    }
    if (key == 4) {
        let funding = document.querySelector('#funding')
        window.scrollTo({
            top: funding.offsetTop,
            behavior: "smooth"
        });
    }
    if (key == 5) {
        let memberList = document.querySelector('#memberList')
        window.scrollTo({
            top: memberList.offsetTop,
            behavior: "smooth"
        });
    }
    if (key == 6) {
        let domo = document.querySelector('#domo')
        window.scrollTo({
            top: domo.offsetTop,
            behavior: "smooth"
        });
    }
}

let elli = ref(false)
//防抖
const setWindowInfo = () => {
    if (window.innerWidth <= 880) {
        elli.value = true
    } else {
        elli.value = false
    }
}
const debounce = (fn, delay) => {
    let timer;
    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fn();
        }, delay);
    }
}
const cancalDebounce = debounce(setWindowInfo, 500)
window.addEventListener('resize', cancalDebounce)
</script>
  
<style></style>
  